<template>
    <div class="left-page">
        <div class="head">
            <div>角色</div>
        </div>
        <el-divider></el-divider>
        <ul class="menuList">
            <li
                class="lis"
                v-for="(item, index) in menuList"
                :key="index"
                :class="index === activeIndex ? 'active' : ''"
            >
                <div @click="link(index, item)" class="name">
                    <span class="oe" :title="item.name">{{ item.name }}</span>
                </div>
                <div v-if="index === activeIndex" class="icon"></div>
                <el-popover placement="right" trigger="hover">
                    <ul class="menu">
                        <li @click="upRole(item)">
                            <i class="el-icon-edit-outline"></i>
                            <span>权限设置</span>
                        </li>
                    </ul>
                    <i class="el-icon-more" slot="reference"></i>
                </el-popover>
            </li>
        </ul>
        <setRole
            :value.sync="showRole"
            :roleId="roleId"
            :resourceIdList="resourceIdList"
            @getList="getList"
        ></setRole>
    </div>
</template>

<script>
import setRole from './setRole'
export default {
    components: {
        setRole
    },
    data () {
        return {
            resourceIdList: [],
            activeIndex: 0,
            showRole: false,
            roleId: null,
            menuList: []
        }
    },
    created () {
        this.getList(true)
    },
    methods: {
        upRole (item) {
            this.showRole = true
            this.roleId = item.id
            this.resourceIdList = item.resourceIdList
        },
        getList (isOne) {
            this.$http.get(this.$store.state.IP + '/systemRoleManage/roleList', {
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    this.menuList = response.res
                    this.link(this.activeIndex, this.menuList[this.activeIndex])
                }
                this.loading = false
                if (response.ret !== '0') {
                    console.log('添加失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('调用添加失败')
            })
        },
        link (index, item) {
            this.activeIndex = index
            this.$emit('setParams', item)
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.el-popover
    // padding: 0;
    min-width: 100px !important
</style>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.el-divider--horizontal
    margin: 10px auto

.addBtn
    width: 160px
    color: #0f88eb
    height: 36px
    background: #e6f1fc

.left-page
    box-shadow: 3px -2px 17px gainsboro
    // z-index: 1
    min-width: 200px
    border: 1px solid #ebeef5
    background-color: #fff
    color: #303133
    -webkit-transition: 0.3s
    transition: 0.3s

    .head
        padding: 20px
        padding-bottom: 0
        display: flex
        justify-content: space-between

.menu li
    display: flex
    justify-content: space-evenly
    align-items: center
    height: 35px

    i
        font-size: 18px

    &:hover
        cursor: pointer
        background-color: #e7f3fd
        color: #0f88eb

.name
    flex: 1
    height: 100%
    align-items: center
    display: flex

.red
    color: #d12020 !important

.menuList
    height: 680px
    padding: 0 20px
    overflow-y: scroll

    &::-webkit-scrollbar
        width: 3px
        height: 3px

    // 滚动条的滑块
    &::-webkit-scrollbar-thumb
        background-color: #a1a3a9
        border-radius: 3px

    li
        display: flex
        height: 50px
        justify-content: space-between
        align-items: center
        color: #606266
        font-size: 14px
        cursor: pointer
        position: relative

        i
            color: #aaaaaa
            font-size: 16px

        .icon
            position: absolute
            left: -20px
            height: 15px
            width: 6px
            background: #0f88eb

    .active
        color: #0f88eb

.oe
    max-width: 200px
    overflow: hidden // 超出的文本隐藏
    text-overflow: ellipsis // 溢出用省略号显示
    white-space: nowrap // 溢出不换行
</style>